<template>
  <el-dialog
    title="选择音乐"
    :visible.sync="show"
    width="600px"
    :before-close="beforeClose"
    :modal-append-to-body="false"
  >
    <div class="link-list flex-c align-center">
      <div
        v-for="(item, index) in linkList"
        :key="item"
        class="flex-c align-center"
      >
        <a
          href="javascript:;"
          :class="{ active: item === active }"
          class="link"
          @click="toggleList(item)"
        >{{ item }}</a>
        <div v-if="index !== linkList.length - 1" class="line">|</div>
      </div>
    </div>
    <div class="grid-2 scorll-box" style="height: 310px; overflow-y: auto">
      <div
        v-for="(item, index) in list"
        :key="item.id"
        :class="{ active: item.active }"
        class="bgm-item flex align-center pointer"
        @click="getItem(item, index)"
      >
        <img src="@/assets/images/bgm.png" :class="{rotate:item.isPlaying}" alt="" class="icon">
        <div class="f1">
          <div class="name nowrap" style="width: 160px">{{ item.name }}</div>
          <div class="sub">{{ item.author }}</div>
          <!-- <div class="sub">00:18</div> -->
        </div>
      </div>
    </div>
    <div class="flex-e" style="margin-top: 30px">
      <el-button
        type="default"
        size="small"
        @click="$emit('close')"
      >取消</el-button>
      <el-button
        type="primary"
        size="small"
        @click="choose"
      >开始剪辑</el-button>
    </div>
    <audio ref="audio" crossorigin="anonymous" style="opacity: 0;height: 0;width: 0;" />
  </el-dialog>
</template>
<script>
import { getMusic } from '@/api/publish'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '抖音二维码'
    }
  },
  data() {
    return {
      activeIndex: -1,
      active: '热歌榜',
      linkList: ['热歌榜', '飙升榜', '原创榜'],
      linkMap: {
        热歌榜: '1',
        飙升榜: '2',
        原创榜: '3'
      },
      list: [],
      current: {}
    }
  },
  created() {
    this.toggleList()
  },
  methods: {
    beforeClose() {
      this.$emit('close')
      this.list.forEach(item => {
        item.isPlaying = false
      })
      if (this.$refs.audio) {
        this.$refs.audio.pause()
      }
    },
    async toggleList(name = this.active) {
      this.active = name
      const id = this.linkMap[name]
      const res = await getMusic({ id })
      if (res.success) {
        this.list = (res.result.dataList || []).map((item) => {
          item.active = false
          item.isPlaying = false
          return item
        })
      } else {
        this.$message.error(res.message)
      }
    },
    getItem(item, index) {
      item.active = !item.active
      this.$set(this.list, index, item)
      this.activeIndex = index
      this.playCurrent(item)
    },
    playCurrent(item, index) {
      const { musicUrl1, musicUrl2, isPlaying } = item
      const url = musicUrl1 || musicUrl2
      if (this.$refs.audio) {
        if (isPlaying) {
          this.$refs.audio.pause()
          item.isPlaying = false
          this.$set(this.list, index, item)
        } else {
          if (this.$refs.audio) {
            this.$refs.audio.src = url
            this.$refs.audio.play()
          }
          this.list.forEach(child => {
            child.isPlaying = false
          })
          item.isPlaying = true
          this.$set(this.list, index, item)
        }
      }
    },
    choose() {
      this.$emit(
        'ok',
        this.list.filter((item) => item.active)
      )
      this.beforeClose()
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  width: 270px;
  height: 270px;
  &:last-child {
    margin-right: 0;
  }
}
.bgm-item {
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: 15px;
  background: rgba(229, 229, 229, 1);
  border: 1px solid #fff;
}
.bgm-item.active {
  border: 1px solid #0077ff;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 30px;
  grid-column-gap: 30px;
  margin-top: 20px;
}
.line {
  margin-left: 5px;
  margin-right: 5px;
}
.icon {
  width: 45px;
  height: 45px;
  margin-right: 18px;
}
/* 定义动画名称和关键帧 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 应用动画到元素上 */
.icon.rotate {
  animation: rotate 2s linear infinite;
}
.name {
  font-size: 14px;
  font-weight: 400;
  line-height: 28.96px;
  color: rgba(0, 0, 0, 1);
}
.sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.link {
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
}
.link.active {
  color: rgba(0, 119, 255, 1);
}
</style>
